const fetchMachine = createMachine({
    /** @xstate-layout N4IgpgJg5mDOIC5QDMwBcDGALAdASwgBswBiAMQFEAVAYQAkBtABgF1FQAHAe1jzTy4A7diAAeiAIwA2CQBoQAT0QAmJgFYAvhvmpMuDmEEQ8gqOQCqAGTIBJS5eZskIbr35CR4hABZ1Ob2oAzBLKavJKCBJqAOxaOujYOAZGJmYAShQAUhQ0VI4irnwCws5e0lLhkkzecSC6ibAArhgYcLD4aGAAtrAkNlQUALI4NJY2NADS+c6F7iWgXlIAHEw4UqGVCKoSOJradQm4TS1tHd0kAEIAgpPTnDxFHqWI0aE4ykshYYqSahK19VwyAAhnhCI0AE6kDJUNIATTuLgec08kikFR+kTU3l2Wn2gi4EDgIkBBWRxVRCAAtBiIlTlDV9oD8EQwGS3BTnj5lJtVGpcUzDklDMZTOzHvMxCollJ-EEvpsotEBfE9Dhjq1YPAZuSngtEGomEs1htMVJAiqDmqNac+N1tfcOXqpQg1GpZetvhElTgjYF-QHA8EAUKbVqzl1xSiuUtlABOHDROPLaJe34JtRLIPZ-6CtUgsGQtk6p2SrzeHmYiQSVZ+7NBvEaIA */
    id: 'fetch',
  
    // 初始 state
    initial: 'idle',
  
    // States
    states: {
      idle: {
        on: {
          FETCH: { target: 'pending' }
        }
      },
      pending: {
        on: {
          FULFILL: { target: 'success' },
          REJECT: { target: 'failure' }
        }
      },
      success: {
        // 初始子 state
        initial: 'items',
  
        // 子 states
        states: {
          items: {
            on: {
              'ITEM.CLICK': { target: 'item' }
            }
          },
          item: {
            on: {
              BACK: { target: 'items' }
            }
          }
        }
      },
      failure: {
        on: {
          RETRY: { target: 'pending' }
        }
      }
    }
  });